<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!--ctrl+R运行-->
		<style type="text/css">
			li{
				list-style-type: none;  /*前面去除小黑点*/
				float: left;
				cursor: pointer; /*光标变小手*/
			}
			.clear{
				clear: both;
			}
		</style>
		<!--
			emmet写法
			ul>li{新闻$}*10
		-->
		<!--
			2、浮动
				缺点：浮动元素脱离文档流，造成父元素的高度崩塌（高度为0）
				解决方法：清楚浮动  clear：both
			总结：使用浮动后，一定要在最后的浮动元素后面清楚浮动
		-->
		<ul>
			<li>新闻1</li>
			<li>新闻2</li>
			<li>新闻3</li>
			<li>新闻4</li>
			<li>新闻5</li>
			<li>新闻6</li>
			<li>新闻7</li>
			<li>新闻8</li>
			<li>新闻9</li>
			<li>新闻10</li>
		</ul>
		<div class="clear"></div>
		<style type="text/css">
			.wrap{
				border: 2px solid mediumvioletred;
			}
			.ry{
				float: left;
			}
			.qb{
				float: right;
			}
		</style>
		<div style="height: 200px;  background-color: #4caf50;">
			
		</div>
		<div class="wrap">
			<span class="ry">正在热映</span>
			<a href="" class="qb">全部</a>
			<div class="clear"></div>
		</div>
		<div style="height: 200px;  background-color: #4caf50;"></div>
		
		<!---->
		<style type="text/css">
			.ib>li{
				float: none; /*不浮动*/
				display: inline-block;
				width: 40px;
				margin-right: 10px;
				border: 1px solid #000;
				vertical-align: top;  /*顶端对齐*/
			}
		</style>
		<ul class="ib">
			<li>
				<div>文字</div>
			</li>
			<li>
				<div>文字123</div>
			</li>
			<li>
				<div>文字123</div>
			</li>
			<li>
				<div>文字123</div>
			</li>
		</ul>
	</body>
</html>
